<template>
  <!-- 导入JSON -->
  <el-drawer title="导入JSON"
             v-model="importJsonVisible"
             size="70%"
             append-to-body
             destroy-on-close
             class="form-design-drawer"
             :before-close="close">
    <vue-monaco-editor v-if="showEdit"
                       v-model="jsonVal"
                       keyIndex="import"
                       height="calc(100% - 40px)"></vue-monaco-editor>
    <div class="drawer-foot">
      <el-button size="default"
                 type="primary"
                 @click="handleImportJsonSubmit">确定
      </el-button>
      <el-button size="default"
                 type="danger"
                 @click="importJsonVisible = false">取消
      </el-button>
    </div>
  </el-drawer>
</template>

<script>

import MonacoEditor from "components/form-design/utils/monaco-editor";
import designTools from "components/form-design/utils/designTools";

export default {
  name: "formImportJson",
  components: {MonacoEditor},
  data() {
    return {
      importJsonVisible: false,
      showEdit: false,
      jsonVal: '',
    }
  },
  methods: {
    importJson() {
      this.jsonVal = '';
      this.importJsonVisible = true;
      this.$nextTick(() => this.showEdit = true)
    },
    handleImportJsonSubmit() {
      try {
        let designOption = designTools.avueOptionToDesignOption(this.jsonVal)
        this.$emit("submit", designOption,this.close)
      } catch (e) {
        this.$message.error(e.message)
      }
    },
    close() {
      this.importJsonVisible = false;
      this.jsonVal = ''
    }

  }
}
</script>

<style lang="scss">
@use "./styles/form-design-drawer";
</style>
